<template>
  <el-row :gutter="24">
    <el-col :span="24">
      <el-card shadow="always">
        <div slot="header" class="clearfix">
          <span>个人信息管理</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="resetPassword">重置密码</el-button>
        </div>
        <div>
          <el-form :model="formObj" ref="formObj" :rules="rules">
            <el-form-item label="用户ID">
              <el-input v-model="formObj.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="用户账号" prop="account">
              <el-input v-model="formObj.account" autocomplete="off" :disabled="this.type==='update'"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="formObj.password" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="用户名称" prop="userName">
              <el-input v-model="formObj.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户手机号" prop="phone">
              <el-input v-model="formObj.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户生日" prop="birthday">
              <el-date-picker
                  v-model="formObj.birthday"
                  type="datetime"
                  placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="用户性别" prop="sex">
              <el-select v-model="formObj.sex" placeholder="请选择" >
                <el-option
                    v-for="item in sexs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户类型" prop="userType">
              <el-select v-model="formObj.userType" placeholder="请选择" :disabled="true">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button style="float: right" type="primary" @click="update">修改</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { doGetUserByToken, doResetPassword, doUpdateUser} from "@/api/user";

export default {
  name: "update",
  data(){
    return{
      formObj:{
      },
      price:0.00,
      options: [{
        value: 1,
        label: '普通用户'
      }, {
        value: 2,
        label: '管理员'
      }],
      sexs: [{
        value: true,
        label: '男'
      }, {
        value: false,
        label: '女'
      }],
      rules: {
        account:[ { required: true, message: '请输入账号', trigger: 'blur' }],
        password:[ { required: true, message: '请输入密码', trigger: 'blur' }],
        userName:[ { required: true, message: '请输入用户名', trigger: 'blur' }],
        phone:[ { required: true, message: '请输入手机号', trigger: 'blur' }],
        userType:[ { required: true, message: '请输入用户类型', trigger: 'blur' }]
      }
    }
  },
  methods: {
    update() {
      this.$refs.formObj.validate((valid) => {
        const  obj = {
          id:this.formObj.id,
          account:this.formObj.account,
          userName:this.formObj.userName,
          phone:this.formObj.phone,
          birthday:this.formObj.birthday,
          sex:this.formObj.sex,
          userType:this.formObj.userType,
        }
        if (valid) {
          doUpdateUser(obj).then(res => {
            if (res.code === 200) {
              this.$message.success("更新成功");
            }
          })
        }
      })
    },
    resetPassword(){
      this.$prompt('请输入新密码', '修改密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async ({ value }) => {
        //走成功
        doResetPassword(this.formObj.id,value).then(res=>{
          if (res.code===200){
            this.$message.success("重置密码成功 新密码为"+value)
            window.localStorage.removeItem("token")
            this.$router.push("/")
          }
        })
      })
    }
  },
  mounted() {
    doGetUserByToken(window.localStorage.getItem("token")).then(res=>{
      if (res.code===200){
        this.formObj=res.data;
      }
    })
  }
}
</script>

<style scoped>

</style>